﻿@using Elsa.Studio.Enums

<style>
    .monaco-editor-container {
        height: 655px !important;
    }
</style>

<MudDialog>
    <TitleContent>
        <MudToolBar Dense="true" Gutters="false">
            <MudText Typo="Typo.h5">@DataPanelItem.Label</MudText>
            <MudTooltip Text="@Localizer["Copy Pretty"]">
                <MudIconButton Icon="@Icons.Material.Outlined.ContentCopy" Size="Size.Medium" OnClick="OnCopyClicked" />
            </MudTooltip>
            <MudSpacer />
            <MudTooltip>
                <TooltipContent>
                     @(IsReadOnly? Localizer["Read Only"] : Localizer["Temporary Edit"])
                </TooltipContent>
                <ChildContent>
                    <MudToggleIconButton @bind-Toggled="IsReadOnly"
                                         Icon="@Icons.Material.Outlined.LockOpen"
                                         Color="@Color.Success"
                                         ToggledIcon="@Icons.Material.Outlined.Lock"
                                         ToggledColor="@Color.Default" />
                </ChildContent>
            </MudTooltip>
            <MudSelect T="string"
                       @bind-Value="SelectedItem"
                       Label="Formatter"
                       Dense="true"
                       FitContent="true"
                       Class="ml-2 mr-2"
                       Margin="Margin.Dense"
                       Variant="Variant.Outlined">
                @foreach (var formatter in AvailableFormatters)
                {
                    <MudSelectItem Value="@formatter.Name">@formatter.Name</MudSelectItem>
                }
            </MudSelect>
            <MudIconButton Icon="@Icons.Material.Outlined.Close" Size="Size.Medium" OnClick="OnClosedClicked" />
        </MudToolBar>
    </TitleContent>
    <DialogContent>
        <MudStack>
            <MudTabs Position="MudBlazor.Position.Left"
                        @bind-ActivePanelIndex="TabIndex"
                        MinimumTabWidth="120px"
                        Rounded="true"
                        Border="true"
                        Outlined="true"
                        KeepPanelsAlive="true"
                        ApplyEffectsToContainer="true"
                        PanelClass="pa-4">
                <MudPaper Height="655px" Width="100%" Elevation="0">
                    <MudTabPanel Text="@Localizer["Pretty"]" Visible="@(FormattedText is not null)">
                        <StandaloneCodeEditor @ref="_monacoEditor"
                                              Id="@_monacoEditorId"
                                              ConstructionOptions="ConfigureMonacoEditor"
                                              CssClass="studio-expression-input-monaco-editor studio-monaco-editor-large" />
                    </MudTabPanel>
                    <MudTabPanel Text="@Localizer["Tabular"]" Visible="@(FormattedTable is not null)">
                        <MudSimpleTable Style="@($"height:655px; width:1080px;")"
                                        FixedHeader="true"
                                        Outlined="true"
                                        Striped="false"
                                        Dense="true"
                                        Elevation="0"
                                        Bordered="false">
                            @if (FormattedTable?.Headers != null)
                            {
                                <thead>
                                    <tr>
                                        @foreach (var header in FormattedTable?.Headers)
                                        {
                                            <th>@header</th>
                                        }
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach (var row in FormattedTable?.Rows)
                                    {
                                        <tr>
                                            @foreach (var x in row)
                                            {
                                                <td>@x</td>
                                            }
                                        </tr>
                                    }
                                </tbody>
                            }
                            
                        </MudSimpleTable>
                    </MudTabPanel>
                    <MudTabPanel Text="@Localizer["Raw"]">
                        <MudTextField Value="@DataPanelItem.Text"
                                      Label="@DataPanelItem.Label"
                                      Lines="32"
                                      Variant="Variant.Outlined"
                                      Margin="Margin.Dense"
                                      ReadOnly="@IsReadOnly" />
                    </MudTabPanel>
                </MudPaper>
            </MudTabs>
        </MudStack>
    </DialogContent>
</MudDialog>